<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
 <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.min.css">
    
	<script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>
	<!--  if timepicker is used in filters -->
	<script>
	$(document).ready(function(){
		 $("#header").load("header.jsp"); 
	  $("button").click(function(){
		  if(!document.getElementById("nombre").value == "" && !document.getElementById("comentario").value == ""){
	    $("<h2>" + $("#nombre").val() + "</h2><h6>" + $("#comentario").val() + "</h6>" ).insertAfter("#comentarios");
	    $.post("servletComentarios",
		  {
		    nombre: $("#nombre").val(),
		    comentario: $("#comentario").val()
		  }
		 , function(data,status){
		    alert("Data: " + data + "\nStatus: " + status);
		  });
		  }else if(document.getElementById("nombre").value == ""){
			  alert("Campo nombre requerido")
		  }else if(document.getElementById("comentario").value == ""){
			  alert("Campo comentario requerido")
		  }
	  });
	});
	</script>
</head>
<body>
<div id="header"></div><br><br><br><br>
	<img src="dia-de-campo.jpg"><br><br><br>
	    <form action="servletComentarios" method="post">
	
	    <div class="form-group">
      <label for="email">Nombre:</label>
      <input type="text" class="form-control" id="nombre" placeholder="Ingrese su nombre">
    </div>
    <div class="form-group">
      <label for="pwd">Comentario:</label>
      <input type="text" class="form-control" id="comentario" placeholder="Ingrese su comentario" width="120"style="height: 92px; ">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> recuerdame</label>
    </div>
    <button type="button" class="btn btn-default">Submit</button><br>
	</form>
	<div id="comentarios">
	
	</div>
</body>
</html>